/**
 * 自定义Message组件
 * 仿照Element UI的Message组件实现轻量级消息提示
 */
(function() {
    // 创建命名空间
    window.CustomMessage = {};
    
    // 消息计数器，用于生成唯一ID
    let messageCount = 0;
    
    // 默认配置
    const defaults = {
        type: 'info',        // 消息类型: success, warning, error, info
        message: '',         // 消息内容
        duration: 3000,      // 显示时间，单位毫秒，设为0则不会自动关闭
        showClose: false,    // 是否显示关闭按钮
        onClose: null,       // 关闭时的回调函数
        offset: 20,          // 消息距离顶部的偏移量
        zIndex: 9999         // z-index值
    };
    
    // 确保消息容器存在
    function ensureMessageContainer() {
        let container = document.querySelector('.custom-message-container');
        if (!container) {
            container = document.createElement('div');
            container.className = 'custom-message-container';
            document.body.appendChild(container);
        }
        return container;
    }
    
    // 创建消息元素
    function createMessageElement(options) {
        const message = document.createElement('div');
        message.className = `custom-message ${options.type}`;
        message.id = `message-${messageCount++}`;
        
        // 创建图标
        const icon = document.createElement('i');
        icon.className = 'icon';
        
        // 根据类型设置图标内容
        switch (options.type) {
            case 'success':
                icon.innerHTML = '✓';
                break;
            case 'warning':
                icon.innerHTML = '!';
                break;
            case 'error':
                icon.innerHTML = '✕';
                break;
            case 'info':
            default:
                icon.innerHTML = 'i';
                break;
        }
        
        // 创建内容
        const content = document.createElement('div');
        content.className = 'content';
        content.innerHTML = options.message;
        
        // 添加到消息元素
        message.appendChild(icon);
        message.appendChild(content);
        
        // 如果需要显示关闭按钮
        if (options.showClose) {
            const closeBtn = document.createElement('div');
            closeBtn.className = 'close';
            closeBtn.innerHTML = '×';
            closeBtn.addEventListener('click', () => {
                closeMessage(message, options.onClose);
            });
            message.appendChild(closeBtn);
        }
        
        return message;
    }
    
    // 显示消息
    function showMessage(options) {
        // 合并默认配置和用户配置
        const mergedOptions = Object.assign({}, defaults, options);
        
        // 确保消息容器存在
        const container = ensureMessageContainer();
        
        // 创建消息元素
        const messageElement = createMessageElement(mergedOptions);
        
        // 添加到容器
        container.appendChild(messageElement);
        
        // 强制回流后添加显示类名，触发过渡动画
        setTimeout(() => {
            messageElement.classList.add('show');
        }, 10);
        
        // 如果设置了自动关闭
        if (mergedOptions.duration > 0) {
            setTimeout(() => {
                closeMessage(messageElement, mergedOptions.onClose);
            }, mergedOptions.duration);
        }
        
        return messageElement.id;
    }
    
    // 关闭消息
    function closeMessage(messageElement, onClose) {
        if (!messageElement || messageElement.classList.contains('closing')) {
            return;
        }
        
        messageElement.classList.remove('show');
        messageElement.classList.add('closing');
        
        // 添加动画
        messageElement.style.animation = 'message-fade-out 0.3s';
        
        // 动画结束后移除元素
        setTimeout(() => {
            if (messageElement && messageElement.parentNode) {
                messageElement.parentNode.removeChild(messageElement);
                
                // 执行关闭回调
                if (typeof onClose === 'function') {
                    onClose();
                }
                
                // 如果没有消息了，移除容器
                const container = document.querySelector('.custom-message-container');
                if (container && !container.hasChildNodes()) {
                    document.body.removeChild(container);
                }
            }
        }, 300);
    }
    
    // 关闭所有消息
    function closeAllMessages() {
        const messages = document.querySelectorAll('.custom-message');
        messages.forEach(message => {
            closeMessage(message);
        });
    }
    
    // 基础消息方法
    CustomMessage.message = function(options) {
        if (typeof options === 'string') {
            options = { message: options };
        }
        return showMessage(options);
    };
    
    // 成功消息
    CustomMessage.success = function(message, options = {}) {
        return showMessage(Object.assign({}, options, {
            type: 'success',
            message: message
        }));
    };
    
    // 警告消息
    CustomMessage.warning = function(message, options = {}) {
        return showMessage(Object.assign({}, options, {
            type: 'warning',
            message: message
        }));
    };
    
    // 错误消息
    CustomMessage.error = function(message, options = {}) {
        return showMessage(Object.assign({}, options, {
            type: 'error',
            message: message
        }));
    };
    
    // 信息消息
    CustomMessage.info = function(message, options = {}) {
        return showMessage(Object.assign({}, options, {
            type: 'info',
            message: message
        }));
    };
    
    // 关闭指定ID的消息
    CustomMessage.close = function(id) {
        const messageElement = document.getElementById(id);
        if (messageElement) {
            closeMessage(messageElement);
        }
    };
    
    // 关闭所有消息
    CustomMessage.closeAll = closeAllMessages;
    
})();